<template>
  <div class="message-container">
     <header style="background:red">
       <slot name="header" ></slot>
     </header>
     <main style="background:green">
        <slot name="main" ></slot>
     </main>
     <footer style="background:yellow">
        <slot name="footer" ></slot>
     </footer>
  </div>
</template>

<script>
export default {
  props:['msg']
}
</script>

<style scoped>
.message-container{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid;
    padding: 20px;
}
</style>